<!-- eslint-disable vue/no-v-html -->
<template>
	<el-card>
		<el-form ref="queryForm" :inline="true">
			<el-form-item prop="postCode" label="项目编号或名称:" style="width: 400px">
				<el-input v-model="state.queryParams.standardName" placeholder="请输入" clearable></el-input>
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<el-table
			v-loading="state.dataListLoading"
			:data="dataList"
			class="mt20"
			stripe
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column label="项目编号" align="center" prop="projectNumber" />
			<el-table-column label="项目名称" align="center" prop="standardProjectName" />
			<el-table-column label="征求状态" align="center" prop="solicitOpinionsDeadline">
				<template #default="scope">
					<span v-if="isDeadlinePassed(scope.row.solicitOpinionsDeadline)" style="color: red">已截止</span>
					<span v-else style="color: green">进行中</span>
				</template>
			</el-table-column>
			<el-table-column label="截止日期" align="center" prop="solicitOpinionsDeadline">
				<template #default="scope">
					<span v-if="scope.row.solicitOpinionsDeadline">{{ scope.row.solicitOpinionsDeadline.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" prop="progressStatus">
				<template #default="scope">
					{{ scope.row.isolicitOpinionsBeforePublish == 0 ? '已发布' : '未发布' }}
				</template> </el-table-column
			>"
			<el-table-column label="发布日期" align="center" prop="achievementReleaseDate" width="150">
				<template #default="scope">
					<span v-if="scope.row.solicitOpinionsBeforePublishDate">{{ scope.row.solicitOpinionsBeforePublishDate.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="100">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="查看" style="cursor: pointer; margin: 0 6px" @click="handleDetail(scope.row)">
						<View />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		></el-pagination>
	</el-card>

	<cmDialog v-model="showDialog" modal-title="详情">
		<div v-if="detail" class="title">{{ detail.standardProjectName }}</div>
		<div v-if="detail" class="content" v-html="detail.solicitOpinionsComment"></div>
		<div v-if="detail" class="file">
			<div v-if="detail.opinionFillTemplate" class="row">
				<el-icon :size="16">
					<Document />
				</el-icon>
				<span>{{ detail.opinionFillTemplate.fileName }}</span>
				<el-button type="primary" size="small" @click="downloadFile(detail.opinionFillTemplate)">下载</el-button>
			</div>
			<div v-if="detail.solicitOpinionsFile" class="row">
				<el-icon :size="16">
					<Document />
				</el-icon>
				<span>{{ detail.solicitOpinionsFile.fileName }}</span>
				<el-button type="primary" size="small" @click="downloadFile(detail.solicitOpinionsFile)">下载</el-button>
			</div>
		</div>
	</cmDialog>
</template>
<script setup lang="ts">
import { zhengqiuDetail, zhengqiuList } from '@/api/other/index'
import { downloadFile } from '@/utils/downLoadFile'
import { onMounted, reactive, ref, watch } from 'vue'

import cmDialog from '@/components/cm-dialog/index.vue'

const props = defineProps({
	step: {
		type: String,
		default: ''
	}
})

const state = reactive({
	queryParams: {
		standardName: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false
})
const dataList = ref([])
const showDialog = ref<boolean>(false)
const detail = ref(null)

watch(
	() => props.step,
	newVal => {
		if (newVal === 'first') {
			getDataList()
		}
	}
)

const isDeadlinePassed = (deadline: string) => {
	if (!deadline) {
		return false
	}
	const deadlineDate = new Date(deadline)
	const currentDate = new Date()
	return currentDate > deadlineDate
}

const getDataList = () => {
	state.dataListLoading = true
	zhengqiuList({
		pageNum: state.pageNum,
		pageSize: state.pageSize,
		standardName: state.queryParams.standardName
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const handleDetail = (row: any) => {
	showDialog.value = true
	zhengqiuDetail(row.progressId).then(res => {
		detail.value = res.data
		console.log(detail.value)
	})
}

const handleSearch = () => {
	state.pageNum = 1
	getDataList()
}

const handleReset = () => {
	state.queryParams.standardName = ''
	state.pageNum = 1
	getDataList()
}

const sizeChangeHandle = (val: number) => {
	state.pageSize = val
	getDataList()
}

const currentChangeHandle = (val: number) => {
	state.pageNum = val
	getDataList()
}

onMounted(() => {
	getDataList()
})
</script>

<style lang="scss" scoped>
.title {
	font-size: 16px;
	text-align: center;
	margin-bottom: 20px;
}

.file {
	margin-top: 30px;

	.row {
		display: flex;
		align-items: center;
		border-bottom: solid 1px #eee;
		padding: 10px 0;

		span {
			margin-left: 5px;
			flex: 1;
		}
	}
}
</style>
